<template>
    <div class="contain">
        <div class="contain-item" v-for="(item,index) in auctionOrderList" @click="goShootingDetails(item)">
<!--          {{auctionOrderList}}-->
            <div class="contain-item-wrap">
                <img class="contain-item-wrap-image" :src="item.thumbnail">
            </div>
            <div class="contain-item-title margin-top10 pading-left-right">
                <text class="contain-item-title-text">{{item.name}}</text>
            </div>
            <div class="contain-item-price margin-top10 pading-left-right">
              <text class="contain-item-price-text">价格:{{ (Number(item.amount )) }}</text>
<!--              <text class="contain-item-price-text">价格:{{ (Number(item.price) + (Number(item.price)*Number(item.addPrice)/100)).toFixed(2) }}</text>-->
            </div>
            <div class="contain-item-NumberSessions margin-top10 pading-left-right">
                <text class="contain-item-numberSessions-text">场次:{{item.num | filterNum}}</text>
            </div>
            <div class="contain-item-NumberSessions margin-top10 pading-left-right" style="margin-bottom: 20px">
                <text class="contain-item-numberSessions-text">编号:{{ item.id }}</text>
            </div>
        </div>
    </div>
</template>
<script>

import { listTwo } from "../../../../api/auctionOrder";

export default {
    data() {
        return {
            auctionOrderList: [],
            pageSize: 20,
            pageNum: 1,
            name: "",
            refreshTitle: "释放刷新页面...",
            refreshing: false,
            loadinging: false,
            groupId: "",
            num:''
        };
    },
    created() {
        this.getAuctionOrderList();
    },
    filters:{
      filterNum(val){
        if(val == 0){
          return '上午场'
        }else if(val == 1){
          return '下午场'
        }else{
          return '晚上场'
        }
      }
    },
    methods: {
        onloading(event) {
            console.log("揍你");
            this.loadinging = true;
            setTimeout(() => {
                this.loadinging = false;
                this.pageNum += 1;
                this.getAuctionOrderList();
            }, 1000);
        },
        onpullingdown(event) {
            console.log("下拉了");
            this.refreshTitle = "释放刷新页面...";
        },
        onrefresh(event) {
            var _this = this;
            console.log("下拉完成");
            this.refreshing = true;
            this.refreshTitle = "加载中...";
            setTimeout(() => {
                _this.pageNum = 1;
                _this.auctionOrderList = [];
                _this.getAuctionOrderList();
                _this.refreshing = false;
            }, 2000);
        },
        goShootingDetails(item) {
            eeui.openPage({
                params: item,
                url: "root://pages/member/transferSystem/snapUp.js",
                statusBarType: "immersion",
                statusBarStyle: false,
            });
        },

        getAuctionOrderList() {

          new Promise((resolve, reject) => {

            storage.getItem('num', event => {
              this.num =  event.data
              resolve()
            })

          }).then(() => {
            console.info('99999999999999999999999999999')
            console.info(this.num)
            console.info('99999999999999999999999999999')
            listTwo({
              num:this.num,
              pageNum: this.pageNum,
              pageSize: this.pageSize,
              mchId: this.getGlobalData().mchId,
              orderStatus: 1,
            }).then((res) => {
              res.data.data.forEach((element) => {
                this.auctionOrderList.push(element);
              });
            });

          })

        },
    },
};
</script>
<style>
page {
    background: rgb(248, 248, 248);
}
.coupon_choose {
    /* position: fixed; */
    width: 750px;
    text-align: center;
    line-height: 80px;
    padding-left: 26px;
    padding-right: 26px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    height: 76px;
    background-color: #fff;
}
.coupon_choose-list {
    width: 300px;
    height: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.coupon_choose_title {
    font-size: 32px;
    font-weight: 500;
    padding-bottom: 5px;
    color: rgba(215, 38, 28, 1);
    margin-bottom: 5px;
}
.coupon_choose_title_no {
    /*font-size: 28px;*/
    font-size: 32px;
    font-weight: 500;
    padding-bottom: 5px;
    color: rgba(102, 102, 102, 1);
}
.coupon_choose_line {
    width: 34px;
    height: 6px;
}
.coupon_choose_line_no {
    background-color: rgb(231, 91, 83);
    height: 4px;
    width: 50px;
}
.vein {
    position: absolute;
    width: 100%;
}

.rule-content {
    z-index: 200;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.5);
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.rule-dio {
    display: flex;
    padding-top: 20px;
    flex-direction: column;
    align-items: center;
    height: 350px;
    width: 710px;
    background-color: white;
    border-radius: 16px;
}
.rule-text {
    height: 70px;
    width: 350px;
    display: flex;
    flex-direction: row;
    align-items: center;
    /* justify-content: center; */
}
.yue {
    /*font-size: 24px;*/
    font-size: 32px;
    font-family: PingFangSC;
    font-weight: 400;
    color: #1a1a1e;
    opacity: 0.3;
}
.rule-click {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    height: 60px;
    width: 170px;
    background: linear-gradient(to right, #474747, #474747);
    color: #b19e81;
    border-radius: 14px;
}

.rule-title {
    color: #b19e81;
}
.deposit {
    width: 750px;
    height: 600px;
    background-image: linear-gradient(to bottom, #c2c2c2, #f8f8f8);
}
.price-content {
    /*display: flex;*/
    /*flex-direction: column;*/
    /*justify-content: space-between;*/
    /*height: 100%;*/
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.total-deposit {
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.total-deposit-head {
    width: 655px;
    padding-top: 30px;
    height: 105px;
    background: linear-gradient(to right, #f7dec5, #f0d0a7);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-left: 20px;
    padding-right: 20px;
}

.total-deposit-bottom {
    height: 120px;
    background-color: white;
    width: 710px;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
}

.aaaa {
    width: 750px;
    height: 91px;
}

.total-deposit-money {
    width: 695px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.botton-deposit {
    padding-top: 20px;
    /* height: 260px; */
    background-color: white;
    padding: 20px;
    /* padding-bottom: 20px; */
}

.botton-deposit-title-content {
    height: 40px;
    width: 143px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.vertical {
    margin-top: 10px;
    height: 30px;
    width: 10px;
    background: linear-gradient(to bottom, #fffff0, #ffd39b);
}

.botton-deposit-title {
    font-size: 30px;
}

.botton-deposit-botton-content {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.title-button {
    margin-top: 10px;
    font-size: 28px;
}

.button-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* margin-top: 40px; */
    width: 200px;
}

.button {
    height: 120px;
    width: 120px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(to right, #f7dec5, #f0d0a7);
}

.title {
    margin-top: 10px;
    font-size: 28px;
    margin-left: 20px;
}

.detailed-content {
    padding-bottom: 20px;
    padding-top: 20px;
    margin-top: 30px;
    margin-left: 20px;
    margin-right: 20px;
    overflow-y: auto;
    /*background-color: yellow;*/
    background-color: #ffffff;
    border-radius: 10px;
}

.detailed-title-content {
    width: 710px;
    padding-left: 20px;
    display: flex;
    flex-direction: row;
    margin-bottom: 40px;
    overflow: hidden;
}

.detailed-box-content {
    padding-right: 35px;
    padding-left: 35px;
    align-content: center;
    justify-content: space-between;
    /*height: 140px;*/
}
.detailed-box-content-bottom {
    position: fixed;
    bottom: 0px;
    left: 35px;
    padding-right: 35px;
    padding-left: 35px;
    align-content: center;
    justify-content: space-between;
    background-color: white;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
}
.detailed-box-bottom {
    position: fixed;
    bottom: 0;
    right: 0;
}

.detailed-title {
    margin-left: 20px;
    width: 400px;
    display: flex;
    flex-direction: column;
}
.aaaaa {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 400px;
    max-height: 92px;
}
.detailed-name {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    justify-content: space-between;
    font-size: 25px;
}

.detailed-date {
    margin-top: 10px;
    /*font-size: 25px;*/
    font-size: 32px;
    color: #808080;
}

.price {
    float: right;
    color: #ff6347;
    font-weight: 700;
    font-size: 27px;
}
.reducePrice {
    float: right;
    color: black;
    font-weight: 700;
    font-size: 27px;
}
.invitation-button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: #333333;
    color: #ffffde;
    font-size: 30px;
    border-radius: 20px;
}

.header {
    height: 146px;
    padding-right: 47px;
    padding-left: 30px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.header-info {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.rule {
    z-index: 100;
    width: 170px;
    height: 50px;
    border-radius: 20px;
    opacity: 0.8;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    font-size: 25px;
}

.rule-circular {
    height: 30px;
    width: 30px;
    border: 4px solid;
    /*color: black;*/
    border-radius: 50px;
    font-size: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.isMaskCanvas {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.cancelCanvasBotton {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    color: white;
    font-size: 40px;
    width: 440px;
    margin-bottom: 20px;
}

.poste_content {
    width: 440px;
    /* margin: auto; */
    overflow: hidden;
    /* margin-top: 200px; */
    /* background-color: #fff; */
    /* position: absolute;
  top: 0; */
    z-index: 9999;
    border-radius: 16px;
}
.canvasBotton {
    border: 2px solid white;
    padding: 10px 100px;
    border-radius: 100px;
    margin-top: 40px;
}
.canvasBottonTitle {
    font-size: 28px;
    color: white;
}
.indicator-text {
    color: #888888;
    font-size: 22px;
    text-align: center;
    padding-top: 20px;
}
.detailed-box-wrap {
    /*border-top-width: 1px;*/
    /*borde-top-color: lightgray;*/
    /*border-top-style: solid;*/
    border-bottom-style: solid;
    border-bottom-color: #e8e8e8;
    border-bottom-width: 2px;
}

.groupCard_content {
    width: 710px;
    height: 80px;
    display: flex;
    flex-direction: row;
}
.groupCard_item {
    height: 80px;
    align-items: center;
    margin-left: 20px;
    margin-right: 30px;
    border-radius: 16px;
}
.groupCard_item_text {
    font-size: 32px;
    font-weight: bold;
    color: rgb(231, 91, 83);
    margin-top: 20px;
    text-align: center;
}
.groupCard_item_text_two {
    font-size: 28px;
    /* font-weight: bold; */
    color: black;
    margin-top: 20px;
    text-align: center;
}
.groupCard_item_text_div {
    width: 70px;
    background-color: rgb(231, 91, 83);
    height: 7px;
    /*margin-left:20px;*/
    margin-top: 5px;
}
.mine-order-icon {
    margin-left: 10px;
    font-family: iconfont2;
    font-size: 32px;
    /*color: #DFBB85;*/
    color: #808080;
}

.contain {
    padding: 20px 20px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
}
.contain-item {
    margin-bottom: 20px;
    width: 345px;
    overflow: hidden;

    border-top-style: solid;
    border-top-width: 1px;
    border-top-color: #b8b3ad;

    border-left-style: solid;
    border-left-width: 1px;
    border-left-color: #b8b3ad;

    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #b8b3ad;

    border-right-style: solid;
    border-right-width: 1px;
    border-right-color: #b8b3ad;
    border-radius: 32px;
}
.contain-item-wrap {
    border-top-right-radius: 32px;
    border-top-left-radius: 32px;
}
.contain-item-wrap-image {
    border-top-right-radius: 32px;
    border-top-left-radius: 32px;
    width: 350px;
    height: 350px;
}

.contain-item-title-text {
    font-size: 30px;
}
.contain-item-price-text {
    font-size: 30px;
    color: red;
}
.contain-item-numberSessions-text {
    font-size: 30px;
}
.margin-top10 {
    margin-top: 15px;
}
.pading-left-right {
    padding: 0px 20px;
}
</style>
